<template>
  <Select mode="multiple" :max-tag-count.camel="2" v-model="innerValue" placeholder="请选择监听器">
    <SelectOption v-for="item in listeners" :value="item.value">
      {{ item.title }}
    </SelectOption>
  </Select>
</template>
<script>
import {Select} from 'ant-design-vue';
import {createProps, isEmpty} from '@/utils/index.js';

export default {
  name: 'ListenerSelector',
  model: {
    prop: 'value',
    event: "change",
  },
  components: {
    Select,
    SelectOption: Select.Option,
  },
  props: {
    service: {
      type: Function,
      default: () => undefined
    },
    listenerType: {
      type: String,
      default: undefined
    },
    value: {
      type: String,
      default: undefined
    },
    flowModelInstance: createProps(Object),
  },
  data() {
    return {
      listeners: []
    };
  },
  methods: {
    loadListeners() {
      let params = {listenerType: this.listenerType};
      if (this.flowModelInstance && this.flowModelInstance.getModel) {
        params.formType = this.flowModelInstance.getModel().formType;
      }
      this.service.get('/listener/loadListeners', {params}).then(result => {
        this.listeners = result;
      });
    },
    changeValue(value) {
      this.$emit('change', value);
    },
  },
  computed: {
    innerValue: {
      get() {
        if (isEmpty(this.value)) return undefined;
        return this.value.split(',');
      },
      set(obj) {
        if (isEmpty(obj)) {
          this.changeValue(undefined);
          return;
        }
        this.changeValue(obj.toString());
      },

    }
  },
  watch: {
    listenerType: {
      handler() {
        this.loadListeners()
      },
      immediate: true
    }
  }
};
</script>